<!--
 * @Description: 进度抽屉
 * @Author: qingyang
 * @Date: 2022-03-23 14:31:00
 * @LastEditors: qingyang
 * @LastEditTime: 2023-06-21 13:58:13
-->
<template>
  <div
    class="audit-history-wrapper g-flex-shrink-0"
    v-loading="loading"
    :class="collapseState ? 'audit-history-wrapper--collapse' : ''"
  >
    <StepsGroup :collapseState="collapseState" :progressList="progressList" />
    <FillTips :collapseState="collapseState" v-if="props.isShowTips"></FillTips>
    <HelperList v-if="isSupplier" />
    <CCircleButton
      class="collapse-button"
      :type="collapseState ? 'c-xian-zuo' : 'c-xian-you'"
      @click="handleCollapse"
    ></CCircleButton>
  </div>
  <div
    class="audit-history-wrapper--placeholder g-flex-shrink-0"
    :class="collapseState ? 'audit-history-wrapper--collapse' : ''"
  >
  </div>
</template>
<script lang="ts" setup>
import type { IProgress } from './types';
import { defineEmits, defineProps, computed, PropType } from 'vue';
import CCircleButton from '@/components/CCircleButton/index.vue';
import StepsGroup from './components/StepsGroup/index.vue';
import FillTips from './components/FillTips/index.vue';
import HelperList from './components/HelperList/index.vue';
import { store } from '@/store';

const props = defineProps({
  progressList: {
    type: Array as PropType<IProgress[]>,
    default: () => {
      return [];
    }
  },
  loading: {
    type: Boolean,
    default: false
  },
  collapse: {
    type: Boolean,
    default: false
  },
  isShowTips: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(['update:collapse']);

const collapseState = computed({
  get() {
    return props.collapse;
  },
  set(val) {
    emits('update:collapse', val);
  }
});
function handleCollapse() {
  collapseState.value = !collapseState.value;
}

/**
 * 是否是供应商端
 */
const isSupplier = computed<boolean>(() => {
  return store.state.app.isSupplier || false;
});
</script>
<style lang="scss" scoped>
.audit-history-wrapper {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 320px;
  height: calc(100vh - 50px - 40px - 80px);
  background: #fff;
  z-index: 19;
  border-left: 1px solid #f0f4f7;
  transition: width 0.3s;
  overflow-y: auto;
  overflow-x: hidden;
  .collapse-button {
    z-index: 20;
    position: fixed;
    top: calc(50% - (50px - 40px - 80px) / 2);
    right: 304px;
    transition: right 0.3s;
  }
}
.audit-history-wrapper--placeholder {
  width: 320px;
  transition: width 0.3s;
}
.audit-history-wrapper--collapse {
  width: 0;
  .collapse-button {
    right: 48px;
  }
}
</style>
